<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1591966_u346be35l6.css">
  <title>Message</title>
  <style>
    .container {
      max-width: 800px;
      margin: 30px auto;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
      padding: 16px;
    }

    .button {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 500;
      color: #303030;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
    }

    .button:hover {
      border-color: lightskyblue;
      color: lightskyblue;
    }

    .message {
      position: fixed;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50px);
      display: flex;
      align-items: center;
      
      padding: 10px 16px;
      background: #37c23a;
      font-size: 14px;
      color: #fff;
      border-radius: 4px;
      transition: all .3s;
      opacity: 0;
    }

    .message .iconfont{
      margin-right: 16px;
    }

    .message.show {
      transform: translate(-50%, 10px);
      opacity: 1;
    }

    .message.success {
      background: #67c23a;
    }

    .message.warning {
      background: #e6a23c;
    }

    .message.info {
      background: #909399;
    }

    .message.danger {
      background: #f56c6c;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Message消息提示</h2>
    <div class="btn-group">
      <button id="btn-success" class="button">成功</button>
      <button id="btn-warning" class="button">警告</button>
      <button id="btn-info" class="button">消息</button>
      <button id="btn-danger" class="button">错误</button>
    </div>
  </div>

  <script>
    class Message {
      constructor({type = 'success', text = ''}) {
        this.type = type
        this.text = text

        this.rendr()
        this.bind()
      }

      rendr() {
        let $div = document.createElement('div')
        this.$message = $div
        $div.classList.add('message')
        $div.classList.add(this.type)
        let $icon = document.createElement('span')
        $icon.classList.add('iconfont')
        $icon.classList.add('icon-' + this.type)
        $div.appendChild($icon)
        let $text = document.createTextNode(this.text)
        $div.appendChild($text)
        document.body.appendChild($div)
      }

      bind() {
        setTimeout(() => this.show());
        setTimeout(() => this.destory(), 3000);
      }

      show() {
        this.$message.classList.add('show')
      }

      destory() {
        this.$message.classList.remove('show')
        setTimeout(() => this.$message.parentNode.removeChild(this.$message), 500);
        
      }
    }

    document.querySelector('#btn-success').onclick = function() {
      new Message({type:'success', text: '我是提示'})
    }
    document.querySelector('#btn-warning').onclick = function() {
      new Message({type:'warning', text: '我是警告'})
    }
    document.querySelector('#btn-info').onclick = function() {
      new Message({type:'info', text: '我是通知'})
    }
    document.querySelector('#btn-danger').onclick = function() {
      new Message({type:'danger', text: '危险'})
    }
  </script>
</body>
</html>